<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <title>欢迎进入聊天室~</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        font-family: '微软雅黑'
    }

    #container {
        max-width: 680px;
        margin: 0 auto;
        background: #ffffff;
        position: relative;
    }

    .header {
        background: #999999;
        height: 40px;
        color: #fff;
        line-height: 40px;
        font-size: 20px;
        padding: 0 10px;
    }

    .footer {
        width: 100%;
        height: 50px;
        background: #999999;
        position: fixed;
        bottom: 0px;
        right: 0px;
        padding: 10px;
    }

    .footer input {
        width: 75%;
        height: 45px;
        outline: none;
        font-size: 20px;
        text-indent: 10px;
        position: absolute;
        border-radius: 6px;
        right: 18%;
    }

    .footer span {
        display: inline-block;
        width: 15%;
        height: 48px;
        background: #666666;
        font-weight: 900;
        line-height: 45px;
        cursor: pointer;
        text-align: center;
        position: absolute;
        right: 1%;
        border-radius: 6px;
    }

    .footer span:hover {
        color: #fff;
        background: #666666;
    }

    .content {
        font-size: 20px;
        overflow: auto;
        padding: 5px 5px 100px 5px;
        overflow-y: scroll;
        max-height: 80%;
    }

    .content li {
        margin-top: 10px;
        padding-left: 10px;
        display: block;
        clear: both;
        overflow: hidden;
    }

    .name {
        float: left;
        padding: 10px;
        border-radius: 10px;
        margin-top: 6px;
        font-style: normal;
        line-height: 24px;
        background-color: aliceblue;
    }

    .msg-content {
        float: left;
        padding: 10px;
        border-radius: 10px;
        margin: 6px 10px 0 10px;
        background: #7cfc00;
        max-width: 72%;
        border: 1px solid #ccc;
        box-shadow: 0 0 3px #ccc;
    }

    .float-right {
        float: right;
    }

</style>
<body>
<div id="container">
    <div class="header">
        欢迎来到聊天室
    </div>
    <ul class="content" id="chat-content-box-1024">
    </ul>
    <div class="footer">
        <input id="chat-content" type="text" placeholder="说点什么吧...">
        <span id="btn" onclick="send()">发送</span>
    </div>
</div>
</body>
<script crossorigin="anonymous"
        integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
        src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">

    // im 通讯地址
    let imPath = '';
    // im token
    let imToken = '';
    // websocket
    let ws;

    const id = '[[${id}]]'
    const nonce = '[[${nonce}]]'
    const authorizationStr = '[[${authorization}]]'

    function doSend(message) {
        ws.send(message);
    }

    $("body").keydown(function () {
        if (event.keyCode == "13") {   // keyCode=13是回车键
            $("#sendButton").click();  // 换成按钮的id即可
        }
    });

    window.onload = function () {
        authorizationAjax(authorizationStr, id, nonce);

        initWebSocket();

        // 获取在线聊天室成员列表
        getOnlineClient();
    }

    /**
     * ws认证，获取ws通信地址
     *
     * @param authorization
     * @param deviceId
     * @param nonce
     */
    function authorization(authorization, deviceId, nonce) {
        return new Promise((resolve, reject) => {
            axios.get('/sloth/im/access',
                {
                    headers: {
                        'Authorization': 'IM ' + authorization
                    },
                    params: {
                        "u": deviceId,
                        "n": nonce
                    }
                }
            )
                .then(
                    res => {
                        resolve(res.data)
                    },
                    err => {
                        reject(err.data)
                    }
                )
                .catch(err => {
                    reject(err.data || err)
                })
        })
    }

    function initWebSocket() {
        ws = new WebSocket(imPath + "?id=" + id + "&token=" + imToken);
        ws.onopen = function (evt) {
            console.log("websocket onopen")
        };
        ws.onclose = function (evt) {
            console.log("websocket onclose")
        };
        ws.onmessage = function (evt) {
            showLeft(evt.data)
        };
        ws.onerror = function (evt) {
            console.log("websocket onerror")
        };
    }

    // jquery 同步方法获取 imPath 和 imToken
    function authorizationAjax(authorization, deviceId, nonce) {
        $.ajax({
            url: '/sloth/im/access',
            type: "get",
            cache: false,
            async: false,
            data: {
                "u": deviceId,
                "n": nonce
            },
            beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("Authorization", 'IM ' + authorization);
            },
            success: function (result) {
                imPath = result.info.addr;
                imToken = result.info.token;
            }
        });
    }

    /**
     * 产生随机字符串
     * @returns {string}
     */
    function createNonce() {
        var s = [];
        var hexDigits = "0123456789abcdef";

        for (var i = 0; i < 36; i++) {
            s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        s[14] = "4";
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
        s[8] = s[13] = s[18] = s[23] = "-";

        var uuid = s.join("");
        return uuid;
    }

    function send() {
        let content = $("#chat-content").val();
        content = content.trim();
        if (content != null && content != '') {
            doSend(id + "@" + content);
            showRight(content);
            $("#chat-content").val('');
        } else {
            alert("聊天内容不能为空！")
        }
    }

    function showLeft(content) {
        const arr = content.split("@");
        const html = "<li>" +
            "<i class=\"name\">" + arr[0] + "</i>" +
            "<span class=\"msg-content\">" + arr[1] + "</span>" +
            "</li>";
        $("#chat-content-box-1024").append(html)
    }

    function showRight(content) {
        const html = "<li>" +
            "<i class=\"name float-right\">" + id + "</i>" +
            "<span class=\"msg-content float-right\" style=\"background-color: #ffffff;\">" + content + "</span>" +
            "</li>";
        $("#chat-content-box-1024").append(html)
    }

    function getOnlineClient() {
        setInterval(function () {
            $.ajax({
                url: '/im/online',
                type: "get",
                success: function (result) {
                    $("#onlineChats").empty();
                    var clients = result.info;
                    var htmlStr = "";
                    for (var i = 0; i < clients.length; i++) {
                        htmlStr += "<li>" + clients[i].deviceId + "</li>";
                    }
                    $("#onlineChats").append(htmlStr);
                }
            });
        }, 10000)
    }

</script>
</html>
